<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
li{ list-style:none;}
img{border:none;}
#box{border:#e5e3e4 1px solid;width:400px; height:400px;margin:30px auto}
ol{ height:30px; line-height:30px; overflow:hidden;}
ol li{width:100px; background:#404040; color:#fff; float:left; text-align:center; cursor:pointer;}
ol li.active{background:red;}
ul{padding:30px;}
ul li{ display:none;}
</style>
<script>
	window.onload=function(){
		var ol=document.getElementsByTagName('ol')[0];
		var btn=ol.getElementsByTagName('li');
		var ul=document.getElementsByTagName('ul')[0];
		var con=ul.getElementsByTagName('li');
		
		for(var i=0;i<btn.length;i++){
			btn[i].index=i;
			btn[i].onmouseover=function(){
				
				for(var j=0;j<btn.length;j++){
					btn[j].className='';
					con[j].style.display='none';	
				};	
				con[this.index].style.display='block';
				this.className='active';
				
			};	
		};
	};
</script>
</head>

<body>
<div id="box">
	<ol>
    	<li class="active">优雅女装</li>
    	<li>优雅女装</li>
    	<li>优雅女装</li>
    	<li>优雅女装</li>
    </ol>
    <ul>
    	<li style="display:block;">11111111111111</li>
    	<li>22222222222222222</li>
    	<li>33333333333333</li>
    	<li>444444444444</li>
    </ul>
</div>

</body>
</html>
